<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form :form="form" slot="detail">
        <a-row>
          <a-col :span='12'>
            <a-form-item label='所属中心' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <j-dict-select-tag type='list' v-decorator="['auditGrade', validatorRules.auditGrade]"
                                 :trigger-change='true' dictCode='audit_grade' placeholder='请选择所属中心'
                                 :disabled='model.bpmStatus=="3"'/>
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='合同名称' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <j-popup
                placeholder='请点击选择项目名称'
                v-decorator="['contractName',validatorRules.contractName]"
                :trigger-change='true'
                org-fields='id,contract_type,contract_name'
                dest-fields='operateContractId,contractType,contractName'
                code='operate_contract_select'
                :disabled='model.bpmStatus=="3"'
                @callback='popupCallback'
              />
              <input v-decorator="['operateContractId']" v-show='false'></input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="合同类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['contractType']" disabled :trigger-change="true" dictCode="contract_type"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="甲方" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['fristParty',validatorRules.fristParty]"
                       :disabled='model.bpmStatus=="3"'placeholder="请输入甲方名称"  ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="乙方" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['secondParty',validatorRules.secondParty]"
                       :disabled='model.bpmStatus=="3"'placeholder="请输入乙方名称"  ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="签订日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择签订日期" v-decorator="['signDate',validatorRules.signDate]"
                      :disabled='model.bpmStatus=="3"':trigger-change="true" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="合同金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['money',validatorRules.money]"
                              :disabled='model.bpmStatus=="3"'placeholder="请输入合同金额" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="备注" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-textarea v-decorator="['remake']" :autoSize='{minRows:4}'
                          :disabled='model.bpmStatus=="3"'placeholder="请输入备注" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="附件" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-upload v-decorator="['accessories',validatorRules.accessories]" :trigger-change="true"
                        :disabled='model.bpmStatus=="3"'></j-upload>
            </a-form-item>
          </a-col>
          <div v-if='model.bpmStatus=="3"'>
            <a-col :span="12">
              <a-form-item label="是否归档" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-switch v-decorator="['isArchiving', validatorRules.isArchiving]"></j-switch>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="归档文件" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-upload v-decorator="['archiveFile',validatorRules.archiveFile]" :trigger-change="true"></j-upload>
              </a-form-item>
            </a-col>
          </div>
          <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
            <a-button @click="submitForm">提 交</a-button>
          </a-col>
        </a-row>
      </a-form>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'HfOperateContractManageForm',
    components: {
    },
    props: {
      //流程表单data
      formData: {
        type: Object,
        default: ()=>{},
        required: false
      },
      //表单模式：true流程表单 false普通表单
      formBpm: {
        type: Boolean,
        default: false,
        required: false
      },
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },

    data () {
      return {
        form: this.$form.createForm(this),
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        labelCol2: {
          xs: { span: 24 },
          sm: { span: 3 },
        },
        wrapperCol2: {
          xs: { span: 24 },
          sm: { span: 20 },
        },
        confirmLoading: false,
        validatorRules: {
          auditGrade:{
            rules: [
              { required: true, message: '请选择所属中心!'},
            ]
          },
          contractName: {
            rules: [
              { required: true, message: '请选择合同名称!'},
            ]
          },
          fristParty: {
            rules: [
              { required: true, message: '请输入甲方名称!'},
            ]
          },
          secondParty: {
            rules: [
              { required: true, message: '请输入乙方名称!'},
            ]
          },
          signDate: {
            rules: [
              { required: true, message: '请选择签订日期!'},
            ]
          },
          money: {
            rules: [
              { required: true, message: '请输入金额!'},
            ]
          },
          accessories: {
            rules: [
              { required: true, message: '请上传附件!'},
            ]
          },
          isArchiving:{
            rules: [
              { required: true, message: '请选择是否归档!'},
            ]
          },
          archiveFile:{
            rules: [
              { required: true, message: '请上传归档文件!'},
            ]
          },
        },
        url: {
          add: "/operate/hfOperateContractManage/add",
          edit: "/operate/hfOperateContractManage/edit",
          queryById: "/operate/hfOperateContractManage/queryById"
        },
        fields:[
          'createBy',
          'createTime',
          'bpmStatus',
          'operateContractId',
          'contractName',
          'code',
          'fristParty',
          'secondParty',
          'signDate',
          'money',
          'remake',
          'accessories',
          'isArchiving',
          'contractType',
          'auditGrade',
          'archiveFile'
        ]
      }
    },
    watch: {
      //流程表单的提交的监听事件，用来监听修改或者操作流程的表单
      // 同时需要修改 submitForm方法

      '$store.state.bpm.bpmSubmitStates': {
        immediate: true,
        handler(val) {
          if (val && val.edit && val.edit === '1') {
            this.submitForm().then(res => {
              if (res) {
                this.$store.commit('BPM_SUBMIT_STATES', {edit: '2'})
              }
            })
          }
        },
      }
    },
    computed: {
      formDisabled(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return false
          }
          return true
        }
        return this.disabled
      },
      showFlowSubmitButton(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return true
          }
        }
        return false
      }
    },
    created () {
      //如果是流程中表单，则需要加载流程表单data
      this.showFlowData();
    },
    methods: {
      add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,this.fields))
        })
      },
      //渲染流程表单数据
      showFlowData(){
        if(this.formBpm === true){
          let params = {id:this.formData.dataId};
          getAction(this.url.queryById,params).then((res)=>{
            if(res.success){
              this.edit (res.result);
            }
          });
        }
      },
      submitForm() {
        const that = this
        return new Promise(((resolve, reject) => {
          // 触发表单验证
          this.form.validateFields((err, values) => {
            if (!err) {
              that.confirmLoading = true
              let httpurl = ''
              let method = ''
              if (!this.model.id) {
                httpurl += this.url.add
                method = 'post'
              } else {
                httpurl += this.url.edit
                method = 'put'
              }
              let formData = Object.assign(this.model, values)
              console.log('表单提交数据', formData)
              httpAction(httpurl, formData, method).then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                  resolve(true)
                } else {
                  that.$message.warning(res.message)
                }
              }).finally(() => {
                that.confirmLoading = false
              })
            } else {
              this.$store.commit('BPM_SUBMIT_STATES', {})
            }
          })
        }))
      },
      popupCallback(row){
        this.form.setFieldsValue(pick(row,this.fields))
      },
    }
  }
</script>